<template>
	<view class="search-box">
		<view class="searchBar">
			<uni-search-bar @confirm="getSearch" :focus="true" v-model="productForm.keyword" @cancel="getSearch" @clear="getSearch">
			</uni-search-bar>
		</view>
		
		<view class="search-list">
			<view class="gameList">
				<view class="gameItem" v-for="item in productList" :key="item.id" @click="gotoPath(`/pages/gameInfo/gameInfo?id=${item.id}`)">
					<view class="gameImage">
						<image :src="item.cover_image"
							mode="widthFix"></image>
					</view>
			
					<view class="game-tit">
						{{item.name}}
					</view>
			
					<view class="game-option">
						<view class="game-xl">
							销量 {{item.total_orders}}
						</view>
						<view class="game-liulan">
							浏览 60362
						</view>
					</view>
			
					<view class="game-pir">
						<view class="pir">
							<text style="font-size: 10px;">￥</text>{{item.price}}
						</view>
						<view class="yj-pir">
							￥{{item.original_price}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getProductList
	} from '@/api/shop/shop.js'
	export default {
		data() {
			return {
				productForm:{
					game_id:"",
					category_id:"",
					keyword:"",
					page:1,
					pageSize:20
				},
				productList:[]
			}
		},
		methods: {
			getSearch() {
				this.productForm.page = 1;
				this.productList = [];
				this.getProductListData();
			},
			
			// 获取商品列表
			async getProductListData(){
				try{
					const res = await getProductList(this.productForm)
					this.productList = res.data.product;
				}catch(error){
					throw Error(error)
				}
			},
			
			gotoPath(url) {
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.search-box{
		.searchBar{
			background-color: #fff;
		}
	}
	
	.search-list{
		box-sizing: border-box;
		padding: 20rpx;
		padding-right: 10rpx;
	}
	
	.gameList {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
	
		.gameItem {
			width: 48%;
			background-color: #fff;
			border-radius: 16rpx;
			overflow: hidden;
	
			.gameImage {
				width: 100%;
				height: 350rpx;
				font-size: 0px;
			}
	
			.game-tit {
				font-size: 26rpx;
				box-sizing: border-box;
				padding: 0rpx 20rpx;
				margin: 10rpx 0px;
				
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				text-overflow: ellipsis;
				
				/* 兼容性处理 */
				line-clamp: 2;
				box-orient: vertical;
				
				/* 文本换行设置 */
				word-wrap: break-word;
				word-break: break-word;
			}
	
			.game-option {
				display: flex;
				align-items: center;
				justify-content: space-between;
				box-sizing: border-box;
				padding: 0px 20rpx;
				font-size: 22rpx;
				color: #999;
			}
	
			.game-pir {
				display: flex;
				align-items: center;
				justify-content: space-between;
				box-sizing: border-box;
				padding: 10rpx 20rpx;
				font-size: 30rpx;
				padding-bottom: 20rpx;
	
				.pir {
					color: red;
				}
	
				.yj-pir {
					color: #999;
					font-size: 24rpx;
					text-decoration: line-through;
				}
			}
		}
	}
</style>